<template>
  <el-card>
<!--    <el-row :gutter="5">-->
<!--      <el-col :span="8" >-->
<!--        <el-card style="background-color: #00afff">-->
<!--          已就业人数:2000-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :span="8" >-->
<!--        <el-card style="background-color: #1ab394">-->
<!--          毕业总人数:2000-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :span="8" >-->
<!--        <el-card style="background-color: #1c84c6">-->
<!--          未就业人数:2000-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-row :gutter="5">
      <el-col :span="18">
        <el-card style="background-color: #7a6df0">
          <div id="chinaMap" style="width: auto;height: 400px"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="background-color: #34bfa3 ">
          <div id="countspe" style="width: auto;height: 400px"></div>
        </el-card>
      </el-col>

    </el-row>
    <el-row>
      <el-col >
        <el-card style="background-color: #3A71A8">
          <div id="changeinmon" style="width: auto;height:350px"></div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import 'echarts/lib/chart/map' //内置好的地图
import 'echarts/map/js/china'  //内置好的城市参数
import { getProvinceOutALPSCount } from "@/api/orderdetail/orderdetail";
import {getcountspe} from "@/api/variety/variety"
import { showmonchan } from '@/api/order/order'

export default {

  data() {
    return {
      mapOptions: {
        //标题样式
        title: {
          text: "不同省份进口的次数",
          left: "center",
          top: "4%",
          textStyle: {
            color: "green",
            fontSize: 24,
            textShadowBlur: 10, //文字本身的阴影长度。
            // textShadowColor: "#33ffff",
          }
        },
        //这里设置提示框 (鼠标悬浮效果)
        tooltip: {
          trigger: 'item',
          //提示框浮层的背景颜色。 (鼠标悬浮后的提示框背景颜色)
          backgroundColor: "#8AC0C0",

          formatter: function (params) {
            var value = params.value;
            if (isNaN(value)) { // 数据不存在时显示为0
              value = 0;
            }
            return params.name + ': ' + value + '次';
          }
        },
        geo: { //地理坐标系组件。地理坐标系组件用于地图的绘制
          type: "map",
          // map: "map",
          roam: true, //否开启鼠标缩放和平移漫游。默认不开启。
          zoom: 1.5, //当前视角的缩放比例。越大比例越大
          label: { //地图上显示文字提示信息
            show: true,
            color: "#F2A65A",
            fontSize: 14 //字体大小
          },
          itemStyle: { //地图区域的多边形 图形样式。
            areaColor: "#FFF5D7 ", //地图区域的颜色。
            borderColor: "#A2D5F2", //图形的描边颜色。
            shadowColor: 'rgba(230,130, 70, 0.5)', //橙色
            shadowBlur: 5, //图形阴影的模糊大小
            emphasis: { //高亮状态下的多边形和标签样式。
              focus: 'self'
            }
          },
          tooltip: {
            show: true,
            trigger: "item",
            alwaysShowContent: false,
            backgroundColor: "#0C121C",
            borderColor: "rgba(0, 0, 0, 0.16);",
            hideDelay: 100,
            triggerOn: "mousemove",
            enterable: true,
            textStyle: {
              color: "#DADADA",
              fontSize: "12",
              width: 20,
              height: 30,
              overflow: "break",
            },
            showDelay: 100
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            var value = params.value;
            if (isNaN(value)) { // 数据不存在时显示为0
              value = 0;
            }
            return params.name + '  进口次数: ' + value;
          }
        },
        //视觉映射组件
        visualMap: {
          top: 'center',
          left: 'left',
          // 数据的范围
          min: 0,
          max: 10,
          text: ['高', '低'],
          realtime: true, //拖拽时，是否实时更新
          calculable: true, //是否显示拖拽用的手柄
          inRange: {
            color: ["#50a3ba", "#eac736", "#d94e5d"],
          },
          textStyle: {
            color: "#fff",
          }
        },
        series: [{
          name: '农产品',
          type: 'map',
          mapType: 'china',
          roam: true,
          itemStyle: { //地图区域的多边形 图形样式。
            areaColor: "#FFF5D7 ", //地图区域的颜色。
            borderColor: "#A2D5F2", //图形的描边颜色。
            shadowColor: 'rgba(230,130, 70, 0.5)', //橙色
            shadowBlur: 5, //图形阴影的模糊大小
            emphasis: { //高亮状态下的多边形和标签样式。
              focus: 'self'
            }
          },
          itemStyle: {
            //地图区域的多边形 图形样式
            normal: {
              //是图形在默认状态下的样式
              label: {
                show: true, //是否显示标签
                textStyle: {
                  color: "black"
                }
              }
            },
            zoom: 1,
            //地图缩放比例,默认为1
            emphasis: {
              //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
              label: {
                show: true
              }
            }
          },
          label: {
            show: true,
            formatter(value) {
              return value.data.value[2];
            },
            color: "#fff",
          },

          top: '0%',
          left: '15%',
          data: []
        }]
      }
    };
  },
  mounted() {
    this.showProvince();
    this.showCountspe();
    this.showchangeinmon();
  },
  methods: {
    showchangeinmon(){
      showmonchan().then(response=>{
        let showmonchanechar=this.$echarts.init(document.getElementById("changeinmon"))
        let names = [];
        let values = [];
        let array = response.data;
        for (let i in array) {
          names.push(array[i].name);
          values.push(array[i].value)
        }
        showmonchanechar.setOption({
            title: {
              text: '每天订单数量'
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: names,
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: values,
              type: 'line',
              smooth: true
            }]
          }
        )
      })
    },
    showCountspe() {
      let showcountecharts = this.$echarts.init(document.getElementById("countspe"))
      getcountspe().then(response => {
        // 种类名称
        let names = [];
        let values = [];
        let array = response.data;
        for (let i in array) {
          names.push(array[i].species_name)
          values.push(array[i].count)
        }
        showcountecharts.setOption(
          {
            title: {
              text: '各种类的品种数量'
            },
            tooltip: {},
            legend: {
              data: ['品种个数']
            },
            xAxis: {
              data: names
            },
            yAxis: {},
            series: [
              {

                type: 'bar',
                data: values
              }
            ]
          }
        )
      })
    },

    //统计各省份进口农产品分布情况
    showProvince(){
      getProvinceOutALPSCount().then(response=>{
        //给地图填充就业人数的数据
        this.mapOptions.series[0].data = response.data;
        this.showChinaMap();
      })

      this.showChinaMap()
    },
    showChinaMap(){
      let showChinaMap=this.$echarts.init(document.getElementById("chinaMap"));
      showChinaMap.setOption(this.mapOptions)
    },

  }
};
</script>

<style >

</style>

